<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>交通流预测分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../libs/layui/css/layui.css" media="all">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .prediction-container {
            padding: 20px;
            background-color: #f2f2f2;
            min-height: 100vh;
        }
        
        .control-panel {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .data-table {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="prediction-container">
        <!-- 控制面板 -->
        <div class="control-panel">
            <h2><i class="layui-icon layui-icon-chart"></i> 交通流预测分析</h2>
            <div class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择交叉口</label>
                        <div class="layui-input-inline">
                            <select name="intersection" lay-filter="intersection">
                                <option value="">请选择交叉口</option>
                                <option value="intersection1">人民路-解放路交叉口</option>
                                <option value="intersection2">中山路-建设路交叉口</option>
                                <option value="intersection3">胜利路-和平路交叉口</option>
                                <option value="intersection4">光明路-友谊路交叉口</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">预测时长</label>
                        <div class="layui-input-inline">
                            <select name="duration" lay-filter="duration">
                                <option value="5">5分钟</option>
                                <option value="10" selected>10分钟</option>
                                <option value="15">15分钟</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="predict">
                            <i class="layui-icon layui-icon-play"></i> 开始预测
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 预测图表 -->
        <div class="chart-container">
            <h3><i class="layui-icon layui-icon-chart"></i> 实际流量 vs 预测流量对比</h3>
            <div id="predictionChart" style="height: 400px;"></div>
        </div>
        
        <!-- 预测数据表格 -->
        <div class="data-table">
            <h3><i class="layui-icon layui-icon-table"></i> 详细预测数据</h3>
            <table class="layui-table" lay-even lay-skin="line">
                <thead>
                    <tr>
                        <th>时间点</th>
                        <th>预测车流量</th>
                        <th>增长率</th>
                        <th>置信度</th>
                        <th>建议操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>+5分钟</td>
                        <td>1,250</td>
                        <td class="layui-text-green">+1.3%</td>
                        <td>85%</td>
                        <td>维持现状</td>
                    </tr>
                    <tr>
                        <td>+10分钟</td>
                        <td>1,380</td>
                        <td class="layui-text-orange">+11.8%</td>
                        <td>78%</td>
                        <td>准备调整</td>
                    </tr>
                    <tr>
                        <td>+15分钟</td>
                        <td>1,520</td>
                        <td class="layui-text-red">+23.2%</td>
                        <td>72%</td>
                        <td>需要优化</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="../../libs/layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'layer'], function(){
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            
            // 初始化预测图表
            initPredictionChart();
            
            // 表单提交事件
            form.on('submit(predict)', function(data){
                console.log('开始预测:', data.field);
                layer.msg('正在预测中...', {icon: 16, time: 2000});
                
                // 模拟预测完成后更新图表
                setTimeout(function() {
                    updatePredictionChart(data.field.duration);
                    layer.msg('预测完成！', {icon: 1});
                }, 2000);
                
                return false;
            });
            
            // 交叉口选择事件
            form.on('select(intersection)', function(data){
                console.log('选择交叉口:', data.value);
                if (data.value) {
                    updatePredictionChart();
                }
            });
            
            // 预测时长选择事件
            form.on('select(duration)', function(data){
                console.log('选择预测时长:', data.value);
                updatePredictionChart(data.value);
            });
        });
        
        // 初始化预测图表
        function initPredictionChart() {
            var chart = echarts.init(document.getElementById('predictionChart'));
            
            // 生成历史数据（过去2小时）
            var historicalData = [];
            var predictionData = [];
            var timeLabels = [];
            var now = new Date();
            
            // 历史数据（过去2小时，每5分钟一个点）
            for (var i = 24; i >= 0; i--) {
                var time = new Date(now.getTime() - i * 5 * 60 * 1000);
                timeLabels.push(time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes());
                historicalData.push(Math.floor(Math.random() * 300) + 1000);
            }
            
            // 预测数据（未来15分钟，每5分钟一个点）
            var lastValue = historicalData[historicalData.length - 1];
            for (var i = 1; i <= 3; i++) {
                var time = new Date(now.getTime() + i * 5 * 60 * 1000);
                timeLabels.push('+' + (i * 5) + '分钟');
                var trend = Math.sin(i * 0.5) * 100; // 模拟趋势
                var noise = (Math.random() - 0.5) * 50; // 添加噪声
                predictionData.push(Math.max(800, Math.floor(lastValue + trend + noise)));
            }
            
            var option = {
                title: {
                    text: '实际流量 vs 预测流量对比',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        var result = params[0].name + '<br/>';
                        params.forEach(function(item) {
                            result += item.seriesName + ': ' + item.value + ' 辆/小时<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['实际流量', '预测流量'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: timeLabels,
                    axisLabel: {
                        rotate: 45,
                        fontSize: 10
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '车流量(辆/小时)',
                    nameTextStyle: {
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    }
                },
                series: [
                    {
                        name: '实际流量',
                        type: 'line',
                        data: historicalData,
                        smooth: true,
                        lineStyle: {
                            color: '#5470c6',
                            width: 3
                        },
                        itemStyle: {
                            color: '#5470c6'
                        },
                        symbol: 'circle',
                        symbolSize: 6
                    },
                    {
                        name: '预测流量',
                        type: 'line',
                        data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null].concat(predictionData),
                        smooth: true,
                        lineStyle: {
                            color: '#ee6666',
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: {
                            color: '#ee6666'
                        },
                        symbol: 'diamond',
                        symbolSize: 8
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 响应式处理
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 更新预测图表
        function updatePredictionChart(duration) {
            var chart = echarts.getInstanceByDom(document.getElementById('predictionChart'));
            if (!chart) return;
            
            duration = duration || 10; // 默认10分钟
            
            // 根据预测时长生成不同的预测数据
            var predictionPoints = Math.floor(duration / 5);
            var newPredictionData = [];
            var newTimeLabels = [];
            
            // 重新生成时间标签
            var now = new Date();
            for (var i = 24; i >= 0; i--) {
                var time = new Date(now.getTime() - i * 5 * 60 * 1000);
                newTimeLabels.push(time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes());
            }
            
            // 生成预测数据
            var baseValue = Math.floor(Math.random() * 300) + 1000;
            for (var i = 1; i <= predictionPoints; i++) {
                newTimeLabels.push('+' + (i * 5) + '分钟');
                var trend = Math.sin(i * 0.3) * 80;
                var noise = (Math.random() - 0.5) * 40;
                newPredictionData.push(Math.max(800, Math.floor(baseValue + trend + noise)));
            }
            
            // 更新图表
            chart.setOption({
                xAxis: {
                    data: newTimeLabels
                },
                series: [{
                    data: chart.getOption().series[0].data // 保持历史数据不变
                }, {
                    data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null].concat(newPredictionData)
                }]
            });
            
            // 更新表格数据
            updatePredictionTable(newPredictionData);
        }
        
        // 更新预测数据表格
        function updatePredictionTable(predictionData) {
            var tableBody = document.querySelector('.layui-table tbody');
            if (!tableBody) return;
            
            var rows = tableBody.querySelectorAll('tr');
            predictionData.forEach(function(value, index) {
                if (rows[index]) {
                    var cells = rows[index].querySelectorAll('td');
                    if (cells.length >= 2) {
                        cells[1].textContent = value.toLocaleString();
                        
                        // 计算增长率
                        var baseValue = 1200; // 基准值
                        var growthRate = ((value - baseValue) / baseValue * 100).toFixed(1);
                        var growthCell = cells[2];
                        growthCell.textContent = (growthRate > 0 ? '+' : '') + growthRate + '%';
                        
                        // 设置增长率颜色
                        growthCell.className = '';
                        if (growthRate > 15) {
                            growthCell.className = 'layui-text-red';
                        } else if (growthRate > 5) {
                            growthCell.className = 'layui-text-orange';
                        } else {
                            growthCell.className = 'layui-text-green';
                        }
                        
                        // 更新置信度
                        var confidence = Math.max(60, 95 - index * 5);
                        cells[3].textContent = confidence + '%';
                        
                        // 更新建议操作
                        var suggestion = '';
                        if (growthRate > 20) {
                            suggestion = '需要优化';
                        } else if (growthRate > 10) {
                            suggestion = '准备调整';
                        } else {
                            suggestion = '维持现状';
                        }
                        cells[4].textContent = suggestion;
                    }
                }
            });
        }
    </script>
</body>
</html>
